<template>
  <Modal
    v-model:active="importCloudFileModalVueActive"
    transfer
    title="模型库"
    :width="1200"
    confirm-text="确定"
    @confirm="onConfirm"
  >
    <div class="modal-header">
      <div>
        <ButtonGroup shape="button-group">
          <Button class="flex-c-c"
            ><img src="../../assets/icon-back.svg" alt="" class="icon"
          /></Button>
          <Button
            ><img src="../../assets/icon-forward.svg" alt="" class="icon"
          /></Button>
          <Button
            ><img src="../../assets/icon-before.svg" alt="" class="icon"
          /></Button>
          <Button
            ><img src="../../assets/icon-refresh.svg" alt="" class="icon"
          /></Button>
          <Button
            ><img src="../../assets/icon-home.svg" alt="" class="icon"
          /></Button>
        </ButtonGroup>
      </div>
      <Row style="width: 100%; margin-left: 20px" :gap="[16, 0]">
        <!-- <Column :span="6">
          <FormItem label="存储空间:">
            <Select
              :options="bucketArr"
              placeholder="请选择存储空间"
              v-model:value="bucketName"
              @change="handleChangeBucket"
            ></Select>
          </FormItem>
        </Column>
        <Column :span="12">
          <FormItem label="初始路径:">
            <Select
              :options="pathArr"
              placeholder="请选择初始路径"
              v-model:value="pathName"
              @change="handleChangePath"
            ></Select>
          </FormItem>
        </Column> -->
        <Column :span="12">
          <FormItem label="检索对象:">
            <Input
              placeholder="请输入关键字搜索"
              clearable
              :suffix="MagnifyingGlass"
            ></Input>
          </FormItem>
        </Column>
      </Row>
    </div>
    <div class="modal-body">
      <Table
        :columns="columns"
        :data="data"
        highlight
        ref="table"
        @row-check="onRowCheck"
        :height="400"
      >
        <TableColumn type="selection" id-key="selection" />
      </Table>
    </div>
    <template #footer>
      <div class="current-path">
        <span>当前位置：</span>
        <Input
          disabled
          style="width: 700px; margin-right: 12px"
          v-model:value="currentPath"
        ></Input>
        <!-- <Button>新建文件夹</Button> -->
      </div>
      <div>
        <Button @click="onClose">取消</Button>
        <Button type="primary" @click="onConfirm">确定</Button>
      </div>
    </template>
  </Modal>
</template>
<script setup lang="ts">
import { defineProps, ref, reactive, onMounted } from "vue";
import { useCoreStore } from "@/UI/store";
import { storeToRefs } from "pinia";
import {
  Row,
  Modal,
  Column,
  FormItem,
  Input,
  Table,
  Button,
  TableColumn,
  TableExposed,
  Message,
  ButtonGroup,
  P,
} from "cax-ui";
import { MagnifyingGlass } from "@vexip-ui/icons";
import { defineTableColumns } from "cax-ui";
import {
  getBucketList,
  getPathList,
  getObjectList,
  getModelList,
} from "@/UI/api/solver";
import { AppEvent } from "@/UI/config";
const coreStore = useCoreStore();
const bucketName = ref("");
const pathName = ref("");
const currentPath = ref("");
const pathArr = ref([]);
const data = ref([]);
const table = ref<TableExposed>();
const props = defineProps({
  onSuccess: {
    type: Function,
    default: () => {
      console.log("default onSuccess");
    },
  },
});
const onConfirm = () => {
  const selected = table.value?.getSelected() ?? [];
  if (selected.length > 0) {
    const url = selected[0].url;
    coreStore.Notify.next({
      type: AppEvent.MODEL_LIBRARY_SELECTED,
      data: url,
    });
    onClose();
  } else {
    Message.error("请选择文件");
  }
};
const onClose = () => {
  coreStore.setImportCloudFileModalVueActive(false);
  table.value?.clearSelected();
};
const columns = reactive(
  defineTableColumns([
    {
      name: "模型名称",
      key: "modelName",
    },
    {
      name: "模型分类",
      key: "modelType",
    },
    {
      name: "适用机型",
      key: "applicableModels",
    },
    {
      name: "机型系列",
      key: "modelSeries",
    },
    {
      name: "载荷情况",
      key: "loadConditions",
    },
    {
      name: "模型范围",
      key: "modelScope",
    },
    {
      name: "业务场景",
      key: "businessScenarios",
    },
  ])
);
let { importCloudFileModalVueActive } = storeToRefs(useCoreStore());

getModelList().then((res) => {
  if (res && res.code === 200) {
    const { result } = res.data;
    const arr = result.map((item: any) => ({
      ...item,
      objectName: item.fileName,
      isDir: false,
    }));
    data.value = arr;
  } else {
    data.value = [];
  }
});

const handleChangeBucket = (value: string) => {
  bucketName.value = value;
  currentPath.value = "";
  pathName.value = "";
  data.value = [];
  getPathList({ bucket: value }).then((res) => {
    if (res) {
      if (res?.data?.length > 0) {
        const arr = res.data.map((item: string) => ({
          label: item,
          value: item,
        }));
        pathArr.value = arr;
      }
    } else {
      pathArr.value = [];
    }
  });
};

const handleChangePath = (value: string) => {
  pathName.value = value;
  console.log({ bucket: bucketName.value, path: value });
  getObjectList({ bucket: bucketName.value, path: value }).then((res) => {
    console.log(res);
    currentPath.value = `oss://${bucketName.value}/${value}`;
    if (res) {
      if (res?.data?.length > 0) {
        data.value = res.data;
      } else {
        data.value = [];
      }
    }
  });
};

const onSelectFile = (objectName: string) => {
  getObjectList({ bucket: bucketName.value, path: objectName }).then((res) => {
    console.log(res);
    currentPath.value = `oss://${bucketName.value}/${objectName}`;
    if (res) {
      if (res?.data?.length > 0) {
        data.value = res.data;
      } else {
        data.value = [];
      }
    }
  });
};

const onRowCheck = (row: any) => {
  table.value?.clearSelected();
  table.value?.selectRow(row.key, true);
};
</script>
<style lang="less" scoped>
.modal-header {
  display: flex;
}
.current-path {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 900px;
  flex: 1;
}
.icon {
  width: 20px;
  height: 20px;
}
.file-name {
  color: inherit; /* 继承父元素的颜色 */
  text-decoration: none; /* 默认去掉下划线 */
}

.file-name:hover {
  color: blue; /* 鼠标悬浮时变蓝 */
  text-decoration: underline; /* 鼠标悬浮时加下划线 */
}
</style>
